import React from "react"
import "./index.css"
import { Layout, Menu, Breadcrumb} from 'antd';
import {MenuUnfoldOutlined,MenuFoldOutlined} from '@ant-design/icons';
import {HashRouter as Router,withRouter} from "react-router-dom"
import Compile from "../router/compile"
import routes from "../router/routes"
import UserMenu from "../components/UserMenu"
import Login from "./Login/index"
import Page404 from "./404/index"
const { SubMenu } = Menu;
const { Header, Content,Sider } = Layout;
let excludes=["/Login","/404"]
@withRouter
class Home extends React.Component{
    constructor(){
        super()
        this.state={
            collapsed: false,
        }
    }
    onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({ collapsed });
    }
    render(){
        if(!excludes.includes(this.props.location.pathname)){
            return(
                <div className="home">
                    <Sider
                    style={{ height: '100%', borderRight: 0 ,maxWidth:"250px"}}
                    collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}
                    ><UserMenu routes={routes} history={this.props.history}></UserMenu>
                    </Sider>
                    <Layout className="site-layout">
                        <Header className="site-layout-background" style={{height:"46px",padding: 0 }} />
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content className="site-layout-background" style={{padding: 12,margin: 0,minHeight: 280,background:"#fff"}}>
                                <Router>
                                    <Compile routes={routes}></Compile>
                                </Router>
                            </Content>
                        </Layout>
                    </Layout>
                </div>
            )
        }else{
            if(this.props.location.pathname == "/Login"){
                return <Login></Login>
            }else{
                return <Page404></Page404>
            }
        }
    }
}
export default Home